<div class="table-control-wrap">
  <button nz-button nzType="primary" (click)="showModal()"><i class="anticon anticon-plus-circle-o"></i>{{l('create')}}</button>
</div>

<nz-table #ajaxTable [nzData]="data" [nzShowPagination]="false" [nzLoading]="loading" [nzScroll]="{x:'1300px'}">
  <thead>
    <tr>
      <th nzWidth="200px">{{l('serial_number')}}</th>
      <th>{{l('permission_name')}}</th>
      <th nzWidth="140px">{{l('operation')}}</th>
    </tr>
  </thead>
  <tbody>
    <ng-template ngFor let-data [ngForOf]="ajaxTable.data">
      <ng-template ngFor let-item [ngForOf]="expandDataCache[data.key]">
        <tr *ngIf="(item.parent&&item.parent.expand)||!(item.parent)">
          <td [nzIndentSize]="item.level*20" [nzShowExpand]="!!item.children" [(nzExpand)]="item.expand"
            (nzExpandChange)="collapse(expandDataCache[data.key],item,$event)">
            {{item.code}}
          </td>
          <td>{{item.name}}</td>
          <td>
            <a (click)="showModal(item.id)">{{l("edit")}}</a>
            <nz-divider nzType="vertical" *ngIf="item.level == 0 || item.level == 1"></nz-divider>
            <a  (click)="showModal('',item)" *ngIf="item.level == 0 || item.level == 1">{{l('create_child')}}</a>
          </td>
        </tr>
      </ng-template>
    </ng-template>
  </tbody>
</nz-table>
<nz-modal [(nzVisible)]="isVisible" [nzTitle]="title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()">
  <form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()">
    <nz-form-item *ngIf="parentName">
      <nz-form-label [nzSm]="6" [nzXs]="24">{{l('parent_name')}}</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <label>{{parentName}}</label>
      </nz-form-control>
    </nz-form-item>
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">{{l('permission_name')}}</nz-form-label>
      <nz-form-control [nzSm]="16" [nzXs]="24">
        <input nz-input formControlName="name" id="name" [(ngModel)]="model.name">
        <nz-form-explain *ngIf="validateForm.get('name').errors">{{l('please_enter_permission_name')}}</nz-form-explain>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-modal>